<template>
	<view class='content'>
		<view class="info">
            <view class="title">1.您对小程序的整体满意度是？</view>
            <view class="status">
                <view>很糟糕</view>
                <view>很满意</view>
            </view>
            <view class="score">
                <view class="item" v-for="item in satisfiedList" :key="item" :class="{check:item.checked}" @click="onSatisfied(item.value)">
                    {{ item.value }}
                </view>
            </view>
        </view>
        <view class="info">
            <view class="title">2.您在小程序上预约体验是？</view>
            <view class="status">
                <view>很糟糕</view>
                <view>很满意</view>
            </view>
            <view class="score">
                <view class="item" v-for="item in reservationList" :key="item" :class="{check:item.checked}" @click="onReservation(item.value)">
                    {{ item.value }}
                </view>
            </view>
        </view>
        <view class="info">
            <view class="title">3.您对小程序的产品设计满意度？</view>
            <view class="status">
                <view>很糟糕</view>
                <view>很满意</view>
            </view>
            <view class="score">
                <view class="item" v-for="item in protList" :key="item" :class="{check:item.checked}" @click="onProt(item.value)">
                    {{ item.value }}
                </view>
            </view>
        </view>
        <view class="info">
            <view class="title">4.描述您的问题或建议</view>
            <textarea class="textarea" v-model="textarea"></textarea>
        </view>
        <view class="info">
            <view class="title">5.您的联系方式</view>
            <input class="input" v-model="phone" placeholder="请填写您的联系方式" />
        </view>
	</view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
const satisfiedList = ref([{
    value: 0,
    checked:false,
},
{
    value: 1,
    checked:false,
},
{
    value: 2,
    checked:false,
},
{
    value: 3,
    checked:false,
},
{
    value: 4,
    checked:false,
},
{
    value: 5,
    checked:false,
},
{
    value: 6,
    checked:false,
},
{
    value: 7,
    checked:false,
},
{
    value: 8,
    checked:false,
},
{
    value: 9,
    checked:false,
},
{
    value: 10,
    checked:false,
},
])
const reservationList = ref([{
    value: 0,
    checked:false,
},
{
    value: 1,
    checked:false,
},
{
    value: 2,
    checked:false,
},
{
    value: 3,
    checked:false,
},
{
    value: 4,
    checked:false,
},
{
    value: 5,
    checked:false,
},
{
    value: 6,
    checked:false,
},
{
    value: 7,
    checked:false,
},
{
    value: 8,
    checked:false,
},
{
    value: 9,
    checked:false,
},
{
    value: 10,
    checked:false,
},
])
const protList = ref([{
    value: 0,
    checked:false,
},
{
    value: 1,
    checked:false,
},
{
    value: 2,
    checked:false,
},
{
    value: 3,
    checked:false,
},
{
    value: 4,
    checked:false,
},
{
    value: 5,
    checked:false,
},
{
    value: 6,
    checked:false,
},
{
    value: 7,
    checked:false,
},
{
    value: 8,
    checked:false,
},
{
    value: 9,
    checked:false,
},
{
    value: 10,
    checked:false,
},
])
const textarea = ref("")
const phone = ref("")
const onSatisfied = (value)=>{
    satisfiedList.value.forEach((item)=>{
        if(item.value <= value){
            item.checked = true;
        }else{
            item.checked = false;
        }
    })
}
const onReservation = (value)=>{
    reservationList.value.forEach((item)=>{
        if(item.value <= value){
            item.checked = true;
        }else{
            item.checked = false;
        }
    })
}
const onProt = (value)=>{
    protList.value.forEach((item)=>{
        if(item.value <= value){
            item.checked = true;
        }else{
            item.checked = false;
        }
    })
}
</script>
<style lang='less' scoped>
.content {
	margin: 18rpx 24rpx;
    padding: 30rpx 24rpx;
    background-color: #fff;
    .info{
        margin-bottom: 40rpx;
        .title{
            font-size: 28rpx;
            font-weight: 800;
            line-height: 40rpx;
            margin-bottom: 24rpx;
        }
        .status{
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #999999;
            font-size: 26rpx;
            margin-bottom: 16rpx;
        }
        .score{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item{
                width: 51rpx;
                height: 60rpx;
                border-radius: 8rpx;
                border: 1rpx solid #EEEEEE;
                font-size: 26rpx;
                color: #999999;
                text-align: center;
                line-height: 60rpx;
                &.check{
                    background: #009A44;
                    border: 1rpx solid #009A44;
                    color: #fff;
                }
            }
        }
        .textarea{
            height: 266rpx;
            width: 100%;
            border-radius: 20rpx;
            border: 2rpx solid #EEEEEE;
            padding: 10rpx;
        }
        .input{
            padding: 0 10rpx;
            width: 100%;
            height: 88rpx;
            border-radius: 20rpx;
            border: 2rpx solid #EEEEEE;
        }
    }
}
</style>